<template>
	<div :class="fromCom=='hScreenLive'||fromCom=='hLookBack'?'canvas-img-box':'canvas-img-box-v'">
	    <canvas  class="canvas-box" ref="canvasBox" id="canvasBox" :width="fromCom=='hScreenLive'||fromCom=='hLookBack'?'750':'610'" :height="fromCom=='hScreenLive'||fromCom=='hLookBack'?'1334':'1053'"></canvas>
		<img ref="base64Img" @click="base64ImgClick" v-if="dataUrl!=''" class="dataUrl" :src="dataUrl" />
	</div>
</template>

<script>

require('jr-qrcode');
	export default {
		props: {
			postImg: String, //背景图
			txBase: String,  //主题图
			correct: Number, //当前图
			fromCom:String, //hScreenLive横屏直播 9张 hLookBack横屏回看4张 vScreenLive竖屏直播7张 vLookBack竖屏回看4张
			liveInfo:Object,//直播间信息（主题，预告时间）
		},
		data() {
			return {
				ERcode: this.$lockr.get("ERcode"),
				liveTheme: '', //主题
				liveTime: '', //预告时间
				dataUrl: '',
			}
		},
		mounted(){
		},

		computed: {
			nickname() {
				return this.$store.state.userInfo.nickname
			},
			init(){
			  if(this.postImg && this. txBase){
          if(this.fromCom=='hScreenLive'){
            this.startCanvash()
          }else if(this.fromCom=='hLookBack'){
            this.startCanvasHback()
          }else if(this.fromCom=='vScreenLive'){
            this.startCanvasv()
          }else{
            this.startCanvasVback()
          }
        }
      }
		},
		created() {
			this.liveTheme = this.liveInfo.title;
			this.liveTime = this.liveInfo.beginTime && this.getLiveTime(this.liveInfo.beginTime)
		},
		methods: {
			base64ImgClick() {
				this.$emit("msgParent", {
					type: "closeSlide",
					data: 'ruan'
				});
			},
			// 时间
			getLiveTime(time){
				    let dt = new Date(time.substr(0, 10));
					let weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
					let timeStrat = time.substr(0, 11).replace(/-/g, "/")
					let timeEnd = time.substr(11, 5)
					let getDay = weekDay[dt.getDay()]
					return "直播时间" + " " + ":" + " " + timeStrat + " " + getDay + " " + timeEnd
			},
			// 横屏直播
            startCanvash() {
				let c = this.$refs.canvasBox;
				let ctx = c.getContext("2d");
				const posterBg = new Image();
				posterBg.src = require('../../assets/images/invitation/bg' + Number(this.correct + 1) + '.png');
				posterBg.onload = () => {
					ctx.drawImage(posterBg, 0, 0, 750, 1334);
					const TXImg = new Image();
					TXImg.src = this.txBase;
					TXImg.onload = () => {
						switch(this.correct) {
							case 0:
								ctx.drawImage(TXImg, 90, 206, 87, 87); //起始   +大小
								ctx.fillStyle = "#FFFFFF";
								ctx.font = "38px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname, 220, 240); //昵称
								//绘制主题
								ctx.fillStyle = "#FFFFFF";
								ctx.font = "normal small-caps bold 35px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center"; //以定位参考线 居中 就是下面的 373的位置
								if(this.liveTheme.length>17){
                                   ctx.fillText(this.liveTheme.slice(0,17)+'...', 373, 423);
                                }else{
                                   ctx.fillText(this.liveTheme, 373, 423);
                                }
								//绘制时间
								ctx.fillStyle = "#FFFFFF";
								ctx.font = "25px Microsoft Yahei";
								ctx.textAlign = "center";
								ctx.fillText(this.liveTime.slice(6), 384, 778);
								break;
							case 1:
								ctx.drawImage(TXImg, 101, 215, 87, 87); //起始   +大小
								//绘制昵称
								ctx.fillStyle = "#2D2D2D";
								ctx.font = "38px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname, 230, 247);
								//绘制主题
								ctx.fillStyle = "#533D20";
								ctx.font = "normal small-caps bold 35px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center";
								if(this.liveTheme.length>15){
                                   ctx.fillText(this.liveTheme.slice(0,15)+'...', 373, 423);
                                }else{
                                   ctx.fillText(this.liveTheme, 373, 423);
                                }

								//绘制时间
								ctx.fillStyle = "#5A462B";
								ctx.font = "25px Microsoft Yahei";
								ctx.textAlign = "center";
								ctx.fillText(this.liveTime.slice(6), 384, 778);
								break;
							case 2:
							case 3:
							case 6:
								ctx.drawImage(TXImg, 101, 213, 87, 87);
								//绘制昵称
								ctx.fillStyle = "#1E1E1E";
								ctx.font = "38px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname, 230, 247);
								ctx.fillStyle = "#333333";
								ctx.font = "normal small-caps bold 35px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center";
								if(this.liveTheme.length>16){
                                   ctx.fillText(this.liveTheme.slice(0,16)+'...', 373, 423);
                                }else{
                                   ctx.fillText(this.liveTheme, 373, 423);
                                }

								ctx.fillStyle = "#321C3B";
								ctx.font = "25px Microsoft Yahei";
								ctx.textAlign = "center";
								ctx.fillText(this.liveTime.slice(6), 384, 778);
								break;
							case 4:
								ctx.drawImage(TXImg, 101, 213, 87, 87);
								ctx.fillStyle = "#1E1E1E";
								ctx.font = "38px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname, 230, 247);
								ctx.fillStyle = "#1E216B";
								ctx.font = "normal small-caps bold 35px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center";
								if(this.liveTheme.length>17){
                                   ctx.fillText(this.liveTheme.slice(0,17)+'...', 373, 423);
                                }else{
                                   ctx.fillText(this.liveTheme, 373, 423);
                                }

								//时间
								ctx.fillStyle = "#6B268A";
								ctx.font = "25px Microsoft Yahei";
								ctx.textAlign = "center";
								ctx.fillText(this.liveTime.slice(6), 384, 778);
								break;
							case 5:
								ctx.drawImage(TXImg, 101, 205, 87, 87);
								//昵称
								ctx.fillStyle = "#1E1E1E";
								ctx.font = "38px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname, 220, 237);
								//主题
								ctx.fillStyle = "#353535";
								ctx.font = "normal small-caps bold 35px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center";
								if(this.liveTheme.length>17){
                                   ctx.fillText(this.liveTheme.slice(0,17)+'...', 373, 423);
                                }else{
                                   ctx.fillText(this.liveTheme, 373, 423);
                                }

								//时间
								ctx.fillStyle = "#8B8B8B";
								ctx.font = "25px Microsoft Yahei";
								ctx.textAlign = "center";
								ctx.fillText(this.liveTime.slice(6), 384, 778);
								break;
							case 7:
								//头像
								ctx.drawImage(TXImg, 295, 236, 159, 157);
								//二维码
								const ERImg = new Image();
								let imgBase64 = jrQrcode.getQrBase64(this.ERcode,{
                                  correctLevel: QRErrorCorrectLevel.L,
                                });
								ERImg.src = imgBase64;
								ERImg.onload = () => {
									ctx.drawImage(ERImg, 156, 840, 184, 184);
									//昵称
									ctx.fillStyle = "#353535";
									ctx.font = "46px Arial";
									ctx.textAlign="center";
									ctx.fillText(this.$store.state.userInfo.nickname, 373, 451);

									//主题
									ctx.fillStyle = "#353535";
									ctx.font = "normal small-caps 900 35px Microsoft Yahei In-Bold Font";
									ctx.textAlign = "center";
									if(this.liveTheme.length>17){
                                       ctx.fillText(this.liveTheme.slice(0,17)+'...', 373, 610);
                                    }else{
                                       ctx.fillText(this.liveTheme, 373, 610);
                                    }
									//时间
									ctx.fillStyle = "#6a6a6a";
									ctx.font = "24px Microsoft Yahei";
									ctx.textAlign = "center";
									ctx.fillText(this.liveTime, 373, 695);
									let dataURL = c.toDataURL("image/png");
									this.dataUrl = dataURL
									this.$emit("msgParent", {
										type: "closeLoading",
										data: 'ruan'
									});
								}

								break;
							case 8:
								ctx.drawImage(TXImg, 315, 145, 116, 116);
								const ERImg1 = new Image();
								let imgBase641 = jrQrcode.getQrBase64(this.ERcode,{
                                  correctLevel: QRErrorCorrectLevel.L,
                                });
								ERImg1.src = imgBase641;
								ERImg1.onload = () => {
									ctx.drawImage(ERImg1, 285, 800, 190, 190);

									let SCImg1 = new Image();
									SCImg1.src = this.postImg;
									SCImg1.onload = () => {
										ctx.drawImage(SCImg1, 210, 406, 338, 191);
										//昵称
										ctx.fillStyle = "#ffffff";
										ctx.font = "30px Arial"
										ctx.textAlign="center";
										ctx.fillText(this.$store.state.userInfo.nickname, 373, 310); //昵称
										//主题
										ctx.fillStyle = "#353535";
										ctx.font = "normal small-caps 900 26px Microsoft Yahei In-Bold Font";
										ctx.textAlign = "center";
										if(this.liveTheme.length>17){
                                           ctx.fillText(this.liveTheme.slice(0,17)+'...', 373, 648);
                                        }else{
                                           ctx.fillText(this.liveTheme, 373, 648);
                                        }

										//时间
										ctx.fillStyle = "#6a6a6a";
										ctx.font = "24px Microsoft Yahei";
										ctx.textAlign = "center";
										ctx.fillText(this.liveTime, 373, 695);
										let dataURL = c.toDataURL("image/png");
										this.dataUrl = dataURL
										this.$emit("msgParent", {
											type: "closeLoading",
											data: 'ruan'
										});
									}

								}
								break;
							default:
								break;
						}
						if(this.correct != 7 && this.correct != 8) {
							//绘制素材图片
							const SCImg = new Image();
							SCImg.src = this.postImg;
							SCImg.onload = () => {

								ctx.drawImage(SCImg, 137, 457, 476, 269); //起始   +大小
								//绘制二维码
								const ERImg = new Image();
								let imgBase64 = jrQrcode.getQrBase64(this.ERcode,{
                                  correctLevel: QRErrorCorrectLevel.L,
                                });
                    			ERImg.src = imgBase64;
								ERImg.onload = () => {
									ctx.drawImage(ERImg, 130, 860, 256, 256);
									let dataURL = c.toDataURL("image/png");
									this.dataUrl = dataURL
									this.$emit("msgParent", {
										type: "closeLoading",
										data: 'ruan'
									});

								}

							}
						}

					}

				}
			},
			// 横屏回看
			startCanvasHback() {
				let c = this.$refs.canvasBox;
				let ctx = c.getContext("2d");
				const posterBg = new Image();
				posterBg.src = require('../../assets/images/invitation/lookBackBg' + Number(this.correct + 1) + '.png');
				posterBg.onload = () => {
					ctx.drawImage(posterBg, 0, 0, 750, 1334);
					const TXImg = new Image();
					TXImg.src = this.txBase;
					TXImg.onload = () => {
						switch(this.correct) {
							case 0:
								ctx.drawImage(TXImg, 101, 218, 87, 87); //起始   +大小
								ctx.fillStyle = "#2067C6";
								ctx.font = "36px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname, 229, 250); //昵称
								//绘制主题
								ctx.fillStyle = "#2569C8";
								ctx.font = "normal small-caps bold 28px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center"; //以定位参考线 居中 就是下面的 373的位置
								if(this.liveTheme.length>21){
								   ctx.fillText(this.liveTheme.slice(0,21)+'...', 373, 720);
								}else{
								   ctx.fillText(this.liveTheme, 373, 720);
								}
								//绘制时间
//								ctx.fillStyle = "#FFFFFF";
//								ctx.font = "25px Microsoft Yahei";
//								ctx.textAlign = "center";
//								ctx.fillText(this.liveTime.slice(6), 384, 778);
								break;
							case 1:
								ctx.drawImage(TXImg, 101, 218, 87, 87); //起始   +大小
								//绘制昵称
								ctx.fillStyle = "#A46141";
								ctx.font = "36px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname, 229, 250);
								//绘制主题
								ctx.fillStyle = "#AA562C";
								ctx.font = "normal small-caps bold 28px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center";
								if(this.liveTheme.length>21){
								   ctx.fillText(this.liveTheme.slice(0,21)+'...', 373, 720);
								}else{
								   ctx.fillText(this.liveTheme, 373, 720);
								}
								break;
							case 2:
								ctx.drawImage(TXImg, 101, 218, 87, 87);
								//绘制昵称
								ctx.fillStyle = "#2067C6";
								ctx.font = "36px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname, 229, 250);
								ctx.fillStyle = "#2569C8";
								ctx.font = "normal small-caps bold 28px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center";
								if(this.liveTheme.length>21){
								   ctx.fillText(this.liveTheme.slice(0,21)+'...', 373, 720);
								}else{
								   ctx.fillText(this.liveTheme, 373, 720);
								}
								break;
							case 3:
								ctx.drawImage(TXImg, 101, 218, 87, 87);
								ctx.fillStyle = "#A9552C";
								ctx.font = "36px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname, 229, 250);
								ctx.fillStyle = "#AA562C";
								ctx.font = "normal small-caps bold 28px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center";
								if(this.liveTheme.length>21){
								   ctx.fillText(this.liveTheme.slice(0,21)+'...', 373, 720);
								}else{
								   ctx.fillText(this.liveTheme, 373, 720);
								}
								break;
							default:
								break;
						}
							//绘制素材图片
							const SCImg = new Image();
							SCImg.src = this.postImg;
							SCImg.onload = () => {
								ctx.drawImage(SCImg, 110, 371, 536, 303); //起始   +大小
								//绘制二维码
								const ERImg = new Image();
								let imgBase64 = jrQrcode.getQrBase64(this.ERcode,{
                                  correctLevel: QRErrorCorrectLevel.L,
                                });
								ERImg.src = imgBase64;
								ERImg.onload = () => {
									ctx.drawImage(ERImg, 265, 760, 225, 225);
									let dataURL = c.toDataURL("image/png");
									this.dataUrl = dataURL
									this.$emit("msgParent", {
										type: "closeLoading",
										data: 'ruan'
									});

								}

							}

					}

				}
			},
			// 竖屏直播
			startCanvasv(){
				let c = this.$refs.canvasBox;
				let ctx = c.getContext("2d");
				const posterBg = new Image();
				posterBg.src = require('../../assets/images/invitation/vbg' + Number(this.correct + 1) + '.png');
				posterBg.onload = () => {
					ctx.drawImage(posterBg, 0, 0, 610, 1053);
					const TXImg = new Image();
					TXImg.src = this.txBase;
					TXImg.onload = () => {
						switch(this.correct) {
							case 0:
								ctx.drawImage(TXImg, 70, 150, 87, 87); //起始   +大小

								ctx.fillStyle = "#FFFFFF";
								ctx.font = "34px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname, 180, 188); //昵称
								//绘制主题
								ctx.fillStyle = "#FFFFFF";
								ctx.font = "normal small-caps bold 33px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center"; //以定位参考线 居中 就是下面的 373的位置
								if(this.liveTheme.length>17){
                                   ctx.fillText(this.liveTheme.slice(0,17)+'...', 305, 330);
                                }else{
                                   ctx.fillText(this.liveTheme, 305, 330);
                                }
								//绘制时间
								ctx.fillStyle = "#FFFFFF";
								ctx.font = "21px Microsoft Yahei";
								ctx.textAlign = "center";
								ctx.fillText(this.liveTime.slice(6), 316, 616);

								break;
							case 1:
								ctx.drawImage(TXImg, 80, 160, 87, 87); //起始   +大小
								//绘制昵称
								ctx.fillStyle = "#2D2D2D";
								ctx.font = "34px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname, 186, 198);
								//绘制主题
								ctx.fillStyle = "#533D20";
								ctx.font = "normal small-caps bold 33px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center";
								if(this.liveTheme.length>15){
                                   ctx.fillText(this.liveTheme.slice(0,15)+'...', 305, 330);
                                }else{
                                   ctx.fillText(this.liveTheme, 305, 330);
                                }

								//绘制时间
								ctx.fillStyle = "#5A462B";
								ctx.font = "21px Microsoft Yahei";
								ctx.textAlign = "center";
								ctx.fillText(this.liveTime.slice(6), 316, 616);
								break;
							case 2:
							case 3:
							case 7:
								ctx.drawImage(TXImg, 80, 160, 87, 87);
								//绘制昵称
								ctx.fillStyle = "#1E1E1E";
								ctx.font = "34px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname, 186, 198);
								ctx.fillStyle = "#333333";
								ctx.font = "normal small-caps bold 33px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center";
								if(this.liveTheme.length>16){
                                   ctx.fillText(this.liveTheme.slice(0,16)+'...', 305, 330);
                                }else{
                                   ctx.fillText(this.liveTheme, 305, 330);
                                }
								ctx.fillStyle = "#321C3B";
								ctx.font = "21px Microsoft Yahei";
								ctx.textAlign = "center";
								ctx.fillText(this.liveTime.slice(6), 316, 616);
								break;
							case 4:
								ctx.drawImage(TXImg, 80, 160, 87, 87);
								ctx.fillStyle = "#1E1E1E";
								ctx.font = "34px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname, 186, 198);
								ctx.fillStyle = "#1E216B";
								ctx.font = "normal small-caps bold 33px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center";
								if(this.liveTheme.length>17){
                                   ctx.fillText(this.liveTheme.slice(0,17)+'...', 305, 330);
                                }else{
                                   ctx.fillText(this.liveTheme, 305, 330);
                                }

								//时间
								ctx.fillStyle = "#6B268A";
								ctx.font = "21px Microsoft Yahei";
								ctx.textAlign = "center";
								ctx.fillText(this.liveTime.slice(6), 316, 616);
								break;
							case 5:
								ctx.drawImage(TXImg, 80, 150, 87, 87);
								//昵称
								ctx.fillStyle = "#1E1E1E";
								ctx.font = "34px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname, 180, 190);
								//主题
								ctx.fillStyle = "#353535";
								ctx.font = "normal small-caps bold 33px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center";
								if(this.liveTheme.length>17){
                                   ctx.fillText(this.liveTheme.slice(0,17)+'...', 305, 330);
                                }else{
                                   ctx.fillText(this.liveTheme, 305, 330);
                                }

								//时间
								ctx.fillStyle = "#8B8B8B";
								ctx.font = "21px Microsoft Yahei";
								ctx.textAlign = "center";
								ctx.fillText(this.liveTime.slice(6), 316, 616);
								break;
							case 6:
								//头像
								ctx.drawImage(TXImg, 240, 180, 130, 131);
								//二维码
								const ERImg = new Image();
								let imgBase64 = jrQrcode.getQrBase64(this.ERcode,{
                                  correctLevel: QRErrorCorrectLevel.L,
                                });
								ERImg.src = imgBase64;
								ERImg.onload = () => {
									ctx.drawImage(ERImg, 110, 650, 200, 200);
									//昵称
									ctx.fillStyle = "#353535";
									ctx.font = "34px Arial";
									ctx.textAlign="center";
									ctx.fillText(this.$store.state.userInfo.nickname, 305, 358);

									//主题
									ctx.fillStyle = "#353535";
									ctx.font = "normal small-caps 900 33px Microsoft Yahei In-Bold Font";
									ctx.textAlign = "center";
									if(this.liveTheme.length>17){
                                       ctx.fillText(this.liveTheme.slice(0,17)+'...', 305, 350);
                                    }else{
                                       ctx.fillText(this.liveTheme, 305, 480);
                                    }
									//时间
									ctx.fillStyle = "#6a6a6a";
									ctx.font = "22px Microsoft Yahei";
									ctx.textAlign = "center";
									ctx.fillText(this.liveTime, 282, 548);
									let dataURL = c.toDataURL("image/png");
									this.dataUrl = dataURL
									this.$emit("msgParent", {
										type: "closeLoading",
										data: 'ruan'
									});
								}
								break;
							case 8:
								ctx.drawImage(TXImg, 0, -21, 94, 94,270,120,94,94);
								const ERImg1 = new Image();
								let imgBase641 = jrQrcode.getQrBase64(this.ERcode,{
                                  correctLevel: QRErrorCorrectLevel.L,
                                });
								ERImg1.src = imgBase641;
								ERImg1.onload = () => {
									ctx.drawImage(ERImg1, 285, 800, 190, 190);
									let SCImg1 = new Image();
									SCImg1.src = this.postImg;
									SCImg1.onload = () => {
										ctx.drawImage(SCImg1, 210, 406, 338, 191);
										//昵称
										ctx.fillStyle = "#ffffff";
										ctx.font = "30px Arial"
										ctx.textAlign="center";
										ctx.fillText(this.$store.state.userInfo.nickname, 305, 248); //昵称
										//主题
										ctx.fillStyle = "#353535";
										ctx.font = "normal small-caps 900 26px Microsoft Yahei In-Bold Font";
										ctx.textAlign = "center";
										if(this.liveTheme.length>17){
                                           ctx.fillText(this.liveTheme.slice(0,17)+'...', 373, 648);
                                        }else{
                                           ctx.fillText(this.liveTheme, 373, 648);
                                        }

										//时间
										ctx.fillStyle = "#6a6a6a";
										ctx.font = "24px Microsoft Yahei";
										ctx.textAlign = "center";
										ctx.fillText(this.liveTime, 373, 695);
										let dataURL = c.toDataURL("image/png");
										this.dataUrl = dataURL
										this.$emit("msgParent", {
											type: "closeLoading",
											data: 'ruan'
										});
									}

								}
								break;
							default:
								break;
						}
						if(this.correct != 6 && this.correct != 7) {
							//绘制素材图片
							const SCImg = new Image();
							SCImg.src = this.postImg;
							SCImg.onload = () => {
							ctx.drawImage(SCImg, 106, 355, 400, 226); //起始   +大小
								//绘制二维码
								const ERImg = new Image();
								let imgBase64 = jrQrcode.getQrBase64(this.ERcode,{
                                  correctLevel: QRErrorCorrectLevel.L,
                                });
                    			ERImg.src = imgBase64;
								ERImg.onload = () => {
									ctx.drawImage(ERImg, 100, 680, 230, 230);
									let dataURL = c.toDataURL("image/png");
									this.dataUrl = dataURL
									this.$emit("msgParent", {
										type: "closeLoading",
										data: 'ruan'
									});

								};



							};


						}

					}

				}
			},
			//竖屏回看
			startCanvasVback(){
				let c = this.$refs.canvasBox;
				let ctx = c.getContext("2d");
				const posterBg = new Image();
				posterBg.src = require('../../assets/images/invitation/lookBackBg' + Number(this.correct + 1) + '.png');
				posterBg.onload = () => {
					ctx.drawImage(posterBg, 0, 0, 610, 1053);
					const TXImg = new Image();
					TXImg.src = this.txBase;
					TXImg.onload = () => {
						switch(this.correct) {
							case 0:
								ctx.drawImage(TXImg, 85, 160, 87, 87); //起始   +大小
								ctx.fillStyle = "#2067C6";
								ctx.font = "34px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname, 186, 200); //昵称
								//绘制主题
								ctx.fillStyle = "#2569C8";
								ctx.font = "normal small-caps bold 26px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center"; //以定位参考线 居中 就是下面的 373的位置
								if(this.liveTheme.length>21){
								   ctx.fillText(this.liveTheme.slice(0,21)+'...', 303, 595);
								}else{
								   ctx.fillText(this.liveTheme, 303, 575);
								}
								//绘制时间
//								ctx.fillStyle = "#FFFFFF";
//								ctx.font = "25px Microsoft Yahei";
//								ctx.textAlign = "center";
//								ctx.fillText(this.liveTime.slice(6), 384, 778);
								break;
							case 1:
								ctx.drawImage(TXImg, 85, 160, 87, 87); //起始   +大小
								//绘制昵称
								ctx.fillStyle = "#A46141";
								ctx.font = "34px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname, 186, 200);
								//绘制主题
								ctx.fillStyle = "#AA562C";
								ctx.font = "normal small-caps bold 26px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center";
								if(this.liveTheme.length>21){
								   ctx.fillText(this.liveTheme.slice(0,21)+'...', 303, 575);
								}else{
								   ctx.fillText(this.liveTheme, 303, 575);
								}
								break;
							case 2:

								ctx.drawImage(TXImg, 85, 160, 87, 87); //起始   +大小
								//绘制昵称
								ctx.fillStyle = "#2067C6";
								ctx.font = "34px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname, 186, 200);
								ctx.fillStyle = "#2569C8";
								ctx.font = "normal small-caps bold 26px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center";
								if(this.liveTheme.length>21){
								   ctx.fillText(this.liveTheme.slice(0,21)+'...', 303, 575);
								}else{
								   ctx.fillText(this.liveTheme, 303, 575);
								}
								break;
							case 3:
								ctx.drawImage(TXImg, 85, 160, 87, 87); //起始   +大小
								ctx.fillStyle = "#A9552C";
								ctx.font = "34px Arial";
								ctx.textAlign="start";
								ctx.fillText(this.$store.state.userInfo.nickname, 186, 200);
								ctx.fillStyle = "#AA562C";
								ctx.font = "normal small-caps bold 26px Microsoft Yahei In-Bold Font";
								ctx.textAlign = "center";
								if(this.liveTheme.length>21){
								   ctx.fillText(this.liveTheme.slice(0,21)+'...', 303, 575);
								}else{
								   ctx.fillText(this.liveTheme, 303, 575);
								}
								break;
							default:
								break;
						}
							//绘制素材图片
							const SCImg = new Image();
							SCImg.src = this.postImg;
							SCImg.onload = () => {
								ctx.drawImage(SCImg, 85, 280, 442, 250); //起始   +大小
								//绘制二维码
								const ERImg = new Image();
								let imgBase64 = jrQrcode.getQrBase64(this.ERcode,{
                                  correctLevel: QRErrorCorrectLevel.L,
                                });
								ERImg.src = imgBase64;
								ERImg.onload = () => {
									ctx.drawImage(ERImg, 200, 600, 200, 200);
									let dataURL = c.toDataURL("image/png");
									this.dataUrl = dataURL
									this.$emit("msgParent", {
										type: "closeLoading",
										data: 'ruan'
									});

								}

							}

					}

				}

			}
		},
		watch: {
      init(val, oldVal) {},
			correct:{
				handler(newval,old){
					if(this.fromCom=='hScreenLive'){
                        this.startCanvash()
					}else if(this.fromCom=='hLookBack'){
						this.startCanvasHback()
					}else if(this.fromCom=='vScreenLive'){
                        this.startCanvasv()
					}else{
						this.startCanvasVback()
					}
				},
			   }
				},
	}

</script>

<style>
   /* 横屏样式 */
	.canvas-img-box{
		width: 100vw;
		height: 1334px;

	}
	.canvas-box {
		width: 750px;
		height: 100%;
		margin: 0 auto;
		background: white;
	    display: none;
	}
	.dataUrl {
		width: 750px;
		height: 100%;
		position: relative;
		z-index: 1;
	}
	/* 竖屏样式 */
	.canvas-img-box-v{
        width: 610px;
		height: 1053px;
		/*background:pink;*/
	}
	.canvas-img-box-v .canvas-box{
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background: white;
	    display: none;
	}
	.canvas-img-box-v .dataUrl{
		width: 610px;
		height: 1053px;
		position: relative;
		z-index: 1;
	}
</style>
